<!-- ProductInfo 页 -->
<template>
  <div class="ProductInfo">
    <el-form
      v-if="info?true:false"
      ref="form"
      v-model="info"
      label-width="100px"
    >

      <el-row :gutter="24">

        <el-col
          :span="12"
          :offset="0"
        >
          <el-form-item label="商品名称:">
            <el-input
              v-model="info.name"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

        <el-col
          :span="12"
          :offset="0"
        >
          <el-form-item label="店铺名称:">
            <el-input
              v-model="info.business.company_name"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 商品名称、店铺名称end -->

      <el-row :gutter="24">

        <el-col :span="12">
          <el-form-item label="商品图片:">
            <div class="productImg">
              <img
                :src="imgUrls+info.image"
                style="height: 200px;"
                @click="onPreview()"
              >
            </div>
          </el-form-item>
        </el-col>
        <!-- 商品图片end -->

        <el-col :span="12">
          <el-form-item label="商品轮播图:">
            <el-carousel
              height="200px"
              type="card"
            >
              <el-carousel-item v-for="(item,index) in info.slider_image">
                <el-image
                  :src="imgUrls+item.img_url"
                  fit="scale-down"
                  style="height: 100%; width: 100%;"
                  @click="onPreview(index,info.slider_image)"
                />
              </el-carousel-item>
              <elImageViewer
                v-if="showViewer"
                :z-index="3000"
                :on-close="closeViewer"
                :url-list="viewerImgList"
                @close="closeViewer"
              />
            </el-carousel>
          </el-form-item>
        </el-col>
        <!-- 商品轮播图end -->

      </el-row>
      <!-- 商品图片、轮播图end -->

      <el-row :gutter="24">
        <el-col>
          <el-form-item>
            <span slot="label">
              规格表详情:
            </span>
          </el-form-item>
        </el-col>

        <el-col>
          <table id="customers">
            <tr>
              <th v-for="(item, index) in group">{{ item }}</th>
              <th v-for="(item, index) in fiex_group">{{ item }}</th>
            </tr>
            <template v-for="(item,index) in value">
              <tr :key="index">
                <td v-for="(ii,indexss) in item.value">
                  {{ ii }}
                </td>
                <!-- 商品图片 -->
                <td>
                  <div class="imgSelect">
                    <!-- {{ item }} -->
                    <el-image
                      :src="imgUrls+item.data.product_pic"
                      style="width:100px ;height: 100px; cursor: pointer;"
                      fit="scale-down"
                      @click="onPreview(item.data.product_pic)"
                    >
                    </el-image>
                  </div>
                </td>
                <!-- 商品轮播图 -->
                <td>
                  <div class="slideshowList">
                    <el-image
                      style="width:100px ;height: 100px; cursor: pointer;"
                      fit="scale-down"
                      v-for="(i,indexx) in item.data.product_slider_image"
                      :src="imgUrls+i"
                      @click="onPreview(index,item.data.product_slider_image)"
                    ></el-image>
                  </div>

                </td>
                <!-- 商品库存 -->
                <td style="width: 5rem;">
                  <!-- <el-input v-model="item.data.stock" /> -->
                  <el-input-number
                    v-model="item.data.product_stock"
                    :disabled="true"
                    :min="0"
                    :step="1"
                  />
                  <!-- {{item}} -->
                </td>
                <!-- 商品价格 -->
                <td style="width: 5rem;">
                  <!-- <el-input v-model="item.data.price" /> -->
                  <el-input-number
                    v-model="item.data.product_price"
                    :disabled="true"
                    :min="1"
                    :precision="2"
                    :step="1"
                  />
                </td>
              </tr>
            </template>
          </table>
        </el-col>

      </el-row>
      <!-- 商品规格表end -->

      <el-row style="margin-top: 1rem;">
        <el-col>
          <el-form-item>
            <span slot="label">
              商品信息:
            </span>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item width="300">
            <template>
              <div
                class="tab_con"
                v-html="info.info"
                style="width: 100%;"
              ></div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品详情end -->

      <el-row :gutter="24">

        <el-col :span="6">
          <el-form-item label="商品单位:">
            <el-input
              v-model="info.unit"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="运费:">
            <el-input
              v-model="info.postage"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 商品单位、运费end -->

    </el-form>
  </div>
</template>

<script>
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    elImageViewer
  },
  props: {
    info: {
      type: Object,
      default: () => []
    },
    image: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    group: {
      default: () => []
    },
    fiex_group: {
      default: () => []
    },
    fiex_value: {
      default: () => []
    }
  },
  data () {
    return {
      imgUrls: this.$baseUrl,
      showViewer: false,
      templateData: [],
      form: []
    }
  },
  computed: {
    // info: {
    //   get () {
    //     return this.value
    //   }
    //   // set (val) {
    //   //   this.$emit('input', val)
    //   // }
    // }
  },
  mounted () {
  },
  methods: {
    onPreview (index, list) {
      this.showViewer = true
      if (list) {
        const tempImgList = []
        for (const i in list) {
          if (list[i].img_url) {
            tempImgList[i] = this.imgUrls + list[i].img_url
          } else {
            tempImgList[i] = this.imgUrls + list[i]
          }
        }
        const temp = []
        // 根据点击的索引 循环删除前面的url
        // 比如有3个轮播图 为 [0,1,2]
        // 当点击了 1 则删除前面的 0 把剩下的 push 到临时数组 temp 中
        for (let i = 0; i < index; i++) {
          temp.push(tempImgList.shift())
        }
        this.viewerImgList = tempImgList.concat(temp)
        console.log("onPreview => this.viewerImgList", this.viewerImgList)
      }
      // const tempImgList = [...this.image]

      else if (index == undefined) { // 没传递index，则代表只有一张图
        this.viewerImgList = []
        const tempImg = this.imgUrls + this.info.image
        this.viewerImgList[0] = tempImg
      } else {
        this.viewerImgList = []
        const tempImg = this.imgUrls + index
        this.viewerImgList[0] = tempImg
      }
    },
    closeViewer () {
      this.showViewer = false
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.ProductInfo {
  .productImg {
    text-align: left;
  }
}
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

// #customers tr:hover {
//   background-color: #ddd;
// }
#customers tr:hover td {
  background-color: #ddd;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}
.tab_con {
  border: 2px solid #eee;
  border-radius: 10px;
  // border-radius: 4px;
  // border: 1px solid #dcdfe6;
  background: #fff;
  padding: 1rem;
  //找不到img标签
  img {
    width: 100% !important;
    height: auto !important;
  }
  //找不到img标签
  ::v-deep {
    img {
      width: 100%;
    }
  }
  //找不到img标签
  >>> img {
    width: 100%;
  }
}
</style>
